<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 组件数据验证</title>
</head>
<style>
    .template {
        margin: 5% 10%;
    }
</style>
<body>
<div id="app">
    <div class="template">
        <html-component1
                v-bind:num="number"
                v-bind:str="str"
                v-bind:array="array"
                v-bind:object="object"
        ></html-component1>
    </div>
</div>

<script src="../js/vue.js"></script>
<script>

    const message = {
        number : 10000,
        str : '字符串或者数字',
        array : [1, 2, 3, 4, 5],
        object : {
            username : '张三',
            password : 123456
        }
    };

    const vue_child = {
        data() {
            return {
                message: 'vue_child局部组件',
            }
        },
        template: `
          <h4>
              <div>
                    {{num}}<br>
                    {{str}}<br>
                    {{array}}<br>
                    {{object}}<br>
              </div>
          </h4>
        `,
        props: {
            num: Number,
            str: [String, Number],
            array: {
                default(){
                    return []
                },
                required : true,
                type : Array,
            },
            object: {
                type : Object,
                default() {
                    return ['no str', 'no number'];
                }
            }
        },
    }

    const demo = new Vue({
        el: '#app',
        data: message,
        methods: {},
        computed: {},
        components: {
            'html-component1': vue_child,
        }
    });
</script>
</body>
</html>